#{extends 'layout.html' /}
#{set title:messages.get('list.title', 'automaticObjectives.name') /}

#{script 'jquery-ui-1.8.21.custom.min.js'/}
#{script 'jquery.ui.datepicker.js'/}
#{script 'jquery.ui.datepicker-es.js'/}
#{script 'datepicker.js'/}

#{script 'graficos/jquery.flot.js'/}
#{script 'graficos/jquery.flot.threshold.js'/}

#{script 'list_automatic_objectives.js'/}

<!-- TODO: Nico, no pude sacarlo a un js distinto por la key de facebook -->
<script src='http://connect.facebook.net/en_US/all.js'></script>

<script> 
	FB.init({appId:${play.configuration.getProperty("securesocial.facebook.clientid")}, status: true, cookie: true});
	
	function postToFeed() {
		
		// calling the API ...
		var obj = {
			method: 'feed',
			// picture: "http://adieta.jymsoft.cloudbees.net/public/images/logo.png",
		};
		
		function callback(response) {
			// necesario por la api, devuelve el id del post... pero no hacemos nada
		}
		
		FB.ui(obj, callback);
	}
</script>
<!-- TODO: Nico, no pude sacarlo a un js distinto por la key de facebook -->

<div id="crudList" class="${type.name}">
	
	<h2 id="crudListTitle">&{'crud.list.title', 'automaticObjectives.name'}</h2>
	
	#{if totalCount <= 0}
		<div class="crudFlash flashError">
			&{'automaticObjectives.list.empty'}
		</div>
	#{/if}
	
	#{if totalCount > 0}
		<div id="crudListTable">
			#{crud.table fields:['nombreAutomaticObjective', 'fechaLimiteAutomaticObjective', 'estadisticas', 'Compartir Progreso']
						, sort: ['nombreAutomaticObjective', 'fechaLimiteAutomaticObjective']}
					
					#{crud.custom 'nombreAutomaticObjective'}
						<a href="/paciente/automaticObjective/show/${object.id}">
							${object.nombreAutomaticObjective}
						</a>					
					#{/crud.custom}
					#{crud.custom 'fechaLimiteAutomaticObjective'}
						<a href="/paciente/automaticObjective/show/${object.id}">
							${object.fechaLimiteAutomaticObjective.format('dd/MM/yyyy')}
						</a>
					#{/crud.custom}
					#{crud.custom 'estadisticas'}
						<div class="contenedor_funciones">
							#{if object.paciente.buscarPlanActivo() == null}
								<a href="#"><img class="funciones" src="/public/images/icons/funciones/grafico_barras.png"
										title="&{'estadisticas'}" alt="&{'estadisticas'}" onclick="alert('Necesita un plan activo');" /></a>
							#{/if}
							#{else}
								<a href="#"><img class="funciones" alt="&{'estadisticas'}" src="/public/images/icons/funciones/grafico_barras.png" title="&{'estadisticas'}"
											onclick="verEstadisticas('${object.fechaInicio.format('dd/MM/yyyy')}', '${object.fechaLimiteAutomaticObjective.format('dd/MM/yyyy')}', ${object.id}, ${object.paciente.buscarPlanActivo().caloriasDiarias});" /></a>
							#{/else}
						</div>
					#{/crud.custom}
					
					#{crud.custom 'Compartir Progreso'}
					<div class="contenedor_funciones">
						<a href="#"><img class="funciones" alt="Compartir Progreso" src="/public/images/icons/funciones/facebook32.png" title="Compartir Progreso"
									onclick="postToFeed(); return false;" /></a>
					</div>
			#{/crud.custom}
			#{/crud.table}
			
		</div>
		
	#{/if}
	
	<div id="crudListAdd" class="btn">
		<a href="@{automaticObjectives.newObjetivoAutomatico(userId)}">
			&{'automaticObjectives.crear'}
		</a>
	</div>
	
</div>

<div id="estadisticas" style="display: none;">
	<div id="sparkline" style="width: 500px; height: 325px;"></div>
	<span id="sparkline_data"></span>
	
	<div style="margin-left: 30px">
		<div class="crudField crud_date">
			<label for="fechaInicio" style="width: 70%">
				&{'plan.fechaInicio'}
			</label>
			<input id="fechaInicio" type="text" size="10" />
		</div>
		
		<div class="crudField crud_date">
			<label for="fechaFin" style="width: 70%">
				&{'plan.fechaFin'}
			</label>
			<input id="fechaFin" type="text" size="10" />
		</div>
	</div>
</div>
